<template>
  <div class="consensus-activity-index">
    <c-title :text="text_title"></c-title>
    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="(item, i) in imagelist" :key="i">
        <img :src="item" alt class="swipe-image" @click="link" />
      </van-swipe-item>
    </van-swipe>
    <div class="nav">
      <router-link tag="div" class="nav-item" :to="fun.getUrl('consensus_activity_exchange')">
        <i class="iconfont icon-icon_circle"></i>
        <p>预约</p>
      </router-link>
      <router-link tag="div" :to="fun.getUrl('consensus_activity_record')" class="nav-item">
        <i class="iconfont icon-icon_dingdan_1"></i>
        <p>活动记录</p>
      </router-link>
      <router-link tag="div" :to="fun.getUrl('consensus_activity_my')" class="nav-item">
        <i class="iconfont icon-huiyuan6"></i>
        <p>我的</p>
      </router-link>
    </div>

    <activity @confirm_handle="confirm_handle" :datas="list" @finish="update_single" />

    <van-overlay :show="show" @click="show = false">
      <div class="wrapper" @click.stop>
        <div class="block">
          <div class="block-content">
            <p class="title">{{ popup_detail.activity_name }}</p>
            <div class="streep">
              <div class="left" @click="minus">
                <i class="iconfont icon-life-game-sign"></i>
              </div>
              <div>
                <input type="number" v-model="number" placeholder="请输入存储数量" />
              </div>
              <div class="right" @click="plus">
                <i class="iconfont icon-life-game-plus"></i>
              </div>
            </div>
            <p class="current-integrate">当前{{ yuan_name }}：{{ yuan }}</p>
            <p class="tips" v-if="popup_detail.join_deduct_rate>0">需要扣除{{ integral_nums }}{{ integral_name }}</p>
          </div>
          <div class="button-group">
            <span class="c-7E7E7E" style="padding: 1.0313rem 0; flex: 1;" @click="overlay_handle('cancel')">取消</span>
            <span class="c-FE5E56" style="padding: 1.0313rem 0; flex: 1;" @click="overlay_handle('confirm')">确认</span>
            <div class="button-group-line"></div>
          </div>
        </div>
      </div>
    </van-overlay>

    <van-overlay :show="password_show" @click="password_show = false">
      <div class="wrapper" @click.stop>
        <div class="block">
          <div class="close">
            <i class="iconfont icon-close11" @click="password_show = false"></i>
          </div>
          <p class="pwd-tips">提示</p>
          <div class="error-password">支付密码输入错误</div>
          <div class="button-group">
            <span class="c-7E7E7E" style="padding: 1.0313rem 0; flex: 1;" @click="password_handle('forget')">忘记密码</span>
            <span class="c-FE5E56" style="padding: 1.0313rem 0; flex: 1;" @click="password_handle('input')">重新输入</span>
            <div class="button-group-line"></div>
          </div>
        </div>
      </div>
    </van-overlay>

    <van-overlay :show="show_pay_pwd" @click="show_pay_pwd = false">
      <div class="wrapper" @click.stop>
        <div class="block">
          <div class="pay-word">
            <p class="pwd-tips">请输入密码</p>
            <div class="paw-word-input">
              <input type="text" v-model="pay_pwd" placeholder="请输入支付密码" />
            </div>
          </div>
          <div class="button-group">
            <span class="c-7E7E7E" style="padding: 1.0313rem 0; flex: 1;" @click="show_popup">取消</span>
            <span class="c-FE5E56" style="padding: 1.0313rem 0; flex: 1;" @click="overlay_handle('notarize')">确认</span>
            <div class="button-group-line"></div>
          </div>
        </div>
      </div>
    </van-overlay>


  </div>
</template>

<script>
import { scrollMixin } from "../../utils/mixin";
import activity from "./components/activity.vue";
export default {
  mixins: [scrollMixin],
  components: { activity },
  computed: {
    integral_nums() {
      if (!this.popup_detail.join_deduct_rate) {
        return 0;
      }
      if (this.popup_detail) {
        let res = this.number * this.popup_detail.join_deduct_rate / 100;
        return res;
      }
    },
  },
  data() {
    return {
      pay_pwd:"",
      number: 1,
      text_title: "",
      imagelist: [],
      isLoadMore: true,
      show: false,
      password_show: false,
      is_has_password: false,
      show_pay_pwd: false,
      list: [],
      total_page: 1,
      page: 1,
      h5_url: "",
      popup_detail: {},
      require_pwd: 0,
      sign_multiple: 1,
      yuan: "",
      yuan_name: "",
      integral_name: "",
    };
  },
  activated() {
    this.init();
    this.getData();
    this.getActivity();
    this.getActivityInfo();
    this.getBalancePwdInfo()
  },
  methods: {
    show_popup(){
      this.show_pay_pwd = false;
      this.show=true;
    },
    getActivityInfo() {
      $http.get("plugin.wise-yuan-trade.frontend.participate-activity.index", '', '').then(res => {
        if (res.result) {
          let data = res.data;
          this.require_pwd = data.require_pwd;
          this.sign_multiple = data.sign_multiple;
          this.yuan = data.yuan;
          this.yuan_name = data.yuan_name;
          this.integral_name = data.integral_name;
        } else {
          this.$toast(res.msg);
        }
      })
    },
    getMoreData() {
      this.isLoadMore = false;
      if (this.page >= this.total_page) {
        return;
      }
      let page = this.page + 1;
      this.getActivity(page);
    },
    getActivity(page = 1) {
      $http.get("plugin.wise-yuan-trade.frontend.consensus-activity.list-page", { page }, '').then(res => {
        this.isLoadMore = true;
        if (res.result) {
          let data = res.data;
          (page==1)?(this.list=data.data):(this.list = this.list.concat(data.data));
          this.total_page = data.last_page;
          this.page = data.current_page;
        } else {
          this.$toast(res.msg);
        }
      })
    },
    getData() {
      $http.get("plugin.wise-yuan-trade.frontend.consensus-activity.index", "", "").then(res => {
        if (res.result) {
          let data = res.data;
          this.text_title = data.plugin_name;
          this.imagelist = [data.one_carousel_img_url];
          this.h5_url = data.carousel_h5_link;
          this.fun.setWXTitle(data.plugin_name);
        } else {
          this.$toast(res.msg);
        }
      })
    },
    init() {
      this.number = '';
      this.pay_pwd = '';
      this.popup_detail = {};
      this.isLoadMore = true;
      this.show = false;
      this.show_pay_pwd = false;
      this.password_show = false;
      this.is_has_password = false;
    },
    password_handle(type) {
      if (type == 'forget') {
        let _url = document.location.href;
        if (this.is_has_password) {
          _url = _url.replace(/consensus_activity/, 'member/balance_password');
          window.location.href = _url
        } else {
          _url = _url.replace(/consensus_activity/, 'member/set_balance_password');
          window.location.href = _url
        }
      } else {
        this.password_show = false;
        this.show_pay_pwd = true;
      }
    },
    link() {
      window.location.href = this.h5_url;
    },
    confirm_handle(data) {
      this.popup_detail = data;
      this.show = true;
    },
    overlay_handle(type) {
      if (type == 'confirm' || type=='notarize') {
        let url = "plugin.wise-yuan-trade.frontend.participate-activity.booking";//预约
        if (this.popup_detail.button.code == 'sign') {
          url = 'plugin.wise-yuan-trade.frontend.participate-activity.submit';//参与
        }
        let json = {
          amount: this.number, aid: this.popup_detail.id
        };
        if (this.require_pwd == 1) {
          if (type == 'confirm') {
            if(this.number==0||this.number==''){
              this.$toast("请输入存储数量")
              return;
            }
            this.show = false;
            this.show_pay_pwd = true;
            return;
          }
          json.pwd = Number(this.pay_pwd);
        }

        $http.post(url, json, "").then(({result, msg,data}) => {
          if (result) {
            this.$toast(msg);
            this.show = false;
            this.show_pay_pwd = false;
            this.update_single(this.popup_detail.id);
          } else {
            if (type == 'notarize' && data.password_error==1) {
                this.show_pay_pwd = false;
                this.password_show = true;
            }else{
              this.$toast(msg);
            }
          }
        })
      }else{
        this.show = false;
      }
    },
    update_single(aid){
      console.log(aid,"aid===");
        $http.post("plugin.wise-yuan-trade.frontend.consensus-activity.activity",{aid},"").then(res=>{
          if(res.result){
            let index = this.list.findIndex(item=>{
               return item.id == aid
            })
            console.log(index,"index====");
            console.log(this.list[index],"更新前");
            this.$set(this.list,index,res.data)
            console.log(this.list[index],"更新后");
          }else{
            this.$toast(res.msg);
          }
        })
    },
    minus() {
      if (Number(this.number) !== 0) {
        this.number = Number(this.number) - Number(this.sign_multiple);
      } else if (this.number <= 0 ) {
        this.number = 1
      }
    },
    plus() {
      if (Number(this.number) !== 0) {
        this.number = Number(this.number) + Number(this.sign_multiple);
      } else if (Number(this.number) == 0) {
        this.number = Number(this.sign_multiple);
      }
    },
    getBalancePwdInfo() {
      $http.get("member.balance-password.is-has-password", {}, "").then(
        (response) => {
          if (response.result == 1) {
            this.is_has_password = response.data.is_has
          } else {
            this.$dialog.alert({ message: response.msg });
          }
        },
        function (response) {
          console.log(response);
        }
      );
    },
  }
};
</script>

<style scoped lang="scss">
.consensus-activity-index {
  padding-bottom: 0.625rem;

  .swipe-image {
    width: 100%;
  }

  .pay-word {
    .pwd-tips {
      margin-top: 1.4375rem;
      margin-bottom: 1.4375rem;
      text-align: center;
    }

    .paw-word-input {
      padding: 0 0.75rem 1.25rem;
    }

    input {
      border: 1px solid #ccc;
      width: 100%;
      border-radius: 0.625rem;
      height: 2.5rem;
      padding: 0 0.8125rem;
    }
  }

  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }

  .block-content {
    padding: 1.25rem 0.75rem 1.5625rem;

    .title {
      text-align: center;
      font-weight: bold;
      font-size: 1rem;
      margin-bottom: 1.25rem;
    }
  }

  .streep {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 0.5rem;
    overflow: hidden;
    border: 1px solid #d6d6dc;
    height: 2.5rem;

    .left,
    .right {
      background: #d6d6dc;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      padding: 0 0.6563rem;
    }

    input {
      width: 100%;
      border: none;
      padding: 0 0.8125rem;
      box-sizing: border-box;
    }
  }

  .current-integrate {
    font-size: 0.8125rem;
    margin-top: 0.8438rem;
    font-weight: bold;
    color: #00001c;
    text-align: left;
    margin-bottom: 0.3438rem;
  }

  .c-7E7E7E {
    color: #7e7e7e;
  }

  .c-FE5E56 {
    color: #fe5e56;
  }

  .button-group {
    position: relative;
    border-top: 1px solid #ececec;
    display: flex;
    align-items: center;
    justify-content: space-around;
    // padding: 1.0313rem 0;
    position: relative;
  }

  .button-group-line {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1px;
    background: #ececec;
  }

  .tips {
    font-size: 0.8125rem;
    font-weight: 400;
    color: #6e6e79;
    text-align: left;
  }

  .block {
    width: 15.625rem;
    background-color: #fff;
    border-radius: 0.625rem;
  }

  .flex-1 {
    flex: 1;
  }

  .flex {
    display: flex;
  }

  .pwd-tips {
    font-weight: bold;
    font-size: 1rem;
  }

  .close {
    text-align: right;
    margin-top: 0.6875rem;
    margin-right: 0.75rem;
  }

  .error-password {
    margin: 0.9063rem 0 1.25rem;
  }

  .between {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .nav {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    margin: 0.625rem 0.9375rem;
    background-color: #fff;
    padding: 0.8438rem 0;
    border-radius: 0.625rem;

    .nav-item {
      flex: 1;
    }
  }

  .flex {
    display: flex;
  }
}
</style>
